<template>
  <div class="container">
    <div>
      <el-upload
        :action="url"
        list-type="picture-card"
        :file-list="fileList"
        :on-change="changeFile"
        :auto-upload="false"
        :on-success="loadFun"
        ref="uploads"
        :headers="token"
        :data="users"
        name="avatar"
      >
        <template #default>
          <i class="el-icon-plus"></i>
        </template>
        <template #file="{ file }">
          <div>
            <img
              class="el-upload-list__item-thumbnail"
              :src="file.url"
              alt=""
            />
            <span class="el-upload-list__item-actions">
              <span
                v-if="!disabled"
                class="el-upload-list__item-delete"
                @click="handleRemove(file)"
              >
                <i class="el-icon-delete"></i>
              </span>
            </span>
          </div>
        </template>
      </el-upload>
      <el-dialog v-model="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="" />
      </el-dialog>
      <el-button @click="startLoad('/upload', 'image')">相册</el-button>
      <el-button @click="startLoad('/uploadheader', 'header')">头像</el-button>
    </div>
  </div>
</template>

<script>
// eslint-disable-next-line no-unused-vars
import { ref, reactive, getCurrentInstance, onMounted, inject } from "vue";
import { GJ_nowTime } from "../../../../static/js/tool.js";
import { baseURL } from "../../../api/api.js";
export default {
  name: "uploadImg",
  setup() {
    let getinfo = inject("getinfo");
    let { proxy: then } = getCurrentInstance();
    let base = baseURL;
    let userinfo = JSON.parse(window.sessionStorage.getItem("userinfo"));
    let token ={token:JSON.parse(window.sessionStorage.getItem("userinfo")).token};
    let url = ref("");
    let users = reactive({
      user: userinfo.user,
      type: "image",
      src: base,
      createTime: GJ_nowTime("date-time", "-"),
    });
    let fileList = ref([]);

    let uploads = ref(null);

    function handleRemove(file) {
      let path = file.url;
      fileList.value.forEach((item, index, arr) => {
        if (item.url == path) {
          arr.splice(index, 1);
        }
      });
    }
    function startLoad(item, ty) {
      url.value = base + item;
      users.type = ty;
      console.log(uploads);
      setTimeout(() => {
        uploads.value.submit();
      }, 400);
    }
    // eslint-disable-next-line no-unused-vars
    function loadFun(res, file, filelist) {
      getinfo();
      then.$message.success("上传成功！");
    }
    function changeFile(file, files) {
      fileList.value = [...files];
    }
    onMounted(() => {});
    // eslint-disable-next-line no-unused-vars
    return {
      loadFun,
      uploads,
      fileList,
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
      handleRemove,
      changeFile,
      startLoad,
      users,
      url,
      token
    };
  },
};
</script>

<style lang="less" scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  div {
    flex: 1;
  }
}
</style>
